<template>
  <div class="table-container">
    <el-table
      ref="table"
      v-loading="loading"
      :border="border"
      :stripe="stripe"
      :data="dataList"
      element-loading-text="加载中..."
      class="table-view"
      :row-key="rowKey"
      :height="height"
      :tree-props="treeProps"
      :summary-method="getSummaries"
      :show-summary="showSummary"
      border
      :row-style="rowStyle"
      :span-method="spanmethod"
      :header-cell-style="{ 'text-align': 'center' }"
      @selection-change="handleSelectionChange"
      @select="handleSelectionSelect"
      @select-all="handleSelectionAll"
    >
      <el-table-column
        v-if="isSelection"
        fixed="left"
        align="center"
        :type="isSelection ? 'selection' : ''"
        prop="selection"
        width="55"
      />
      <el-table-column
        v-if="isRadio"
        fixed="left"
        width="65"
        label="选择"
        align="center"
      >
        <template slot-scope="scope">
          <el-radio
            v-model="selectRadio"
            :label="scope.row"
            @change="changeRow($event, scope.row)"
            >&nbsp;</el-radio
          >
        </template>
      </el-table-column>

      <el-table-column
        fixed="left"
        width="80"
        type="index"
        label="序号"
        align="center"
      />

      <slot name="column" />
    </el-table>
    <div class="table-bottm" style="width: 100%">
      <div>
        <slot name="bottm" />
      </div>
      <div style="text-align: right; width: 100%; margin-top: 10px">
        <el-pagination
          v-if="showPagination"
          :background="true"
          :current-page.sync="page"
          :page-size.sync="size"
          :layout="layout"
          :page-sizes="pageSizes"
          :total="total"
          v-bind="$attrs"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TableView",
  props: {
    isSelection: {
      type: Boolean,
      default: true,
    },

    // 是否本地分页
    iscurrentChangePage: {
      type: Boolean,
      default: false,
    },

    treeProps: {
      type: Object,
      default() {
        return {};
      },
    },

    rowKey: {
      type: String,
      default: "",
    },

    height: {
      type: String,
      required: false,
      default() {
        return "53vh";
      },
    },

    dataList: {
      type: Array,
      required: true,
      default() {
        return [];
      },
    },

    flexHeight: {
      default() {
        return false;
      },
      type: Boolean,
      required: false,
    },

    loading: {
      type: Boolean,
      default: false,
    },
    border: {
      type: Boolean,
      default: false,
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    isSelection: {
      type: Boolean,
      default: true,
    },
    isRadio: {
      type: Boolean,
      default: false,
    },
    showSummary: {
      type: Boolean,
      default: false,
    },
    summaryHandler: {
      type: Function,
      default: (val) => {
        return [];
      },
    },
    rowStyle: Function | Object,

    showPagination: {
      type: Boolean,
      default: true,
    },

    page: {
      type: Number,
      default() {
        return 1;
      },
    },

    size: {
      type: Number,
      default() {
        return 10;
      },
    },

    total: {
      type: Number,
      default() {
        return 0;
      },
    },

    pageSizes: {
      type: Array,
      default() {
        return [10, 30, 50, 100];
      },
    },
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    },
    spanmethod: {
      type: Function,
    },
  },

  data() {
    return {
      selectRadio: {},
      tableData: [],
      tableCopyTableList: [],
      tableTotal: 0,
    };
  },
  watch: {
    dataList: {
      handler(newVal) {
        if (this.iscurrentChangePage) {
          this.tableCopyTableList = JSON.parse(JSON.stringify(newVal));
          this.tableTotal = this.tableCopyTableList.length;
          this.tableData = this.currentChangePage(
            this.pageSize,
            this.currentPage
          );
        }
      },
      immediate: true,
    },
  },

  methods: {
    handleSizeChange(val) {
      this.$emit("pagination", { page: this.page, size: val });
    },
    handleCurrentChange(val) {
      this.$emit("pagination", { page: val, size: this.size });
    },
    handleSelectionChange(val, row) {
      this.$emit("onSelectionChange", val);
    },
    handleSelectionSelect(rows, row) {
      this.$emit("handleSelectionSelect", {
        rows: rows,
        row: row,
      });
    },
    doLayout() {
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
    },
    handleSelectionAll(val) {
      console.log(val);
      this.$emit("handleSelectionAll", val);
    },
    changeRow(even, row) {
      this.$emit("onRadioChange", row);
    },
    // 本地分页方法
    currentChangePage(size, current) {
      const tablePush = [];
      this.tableCopyTableList.forEach((item, index) => {
        if (size * (current - 1) <= index && index <= size * current - 1) {
          tablePush.push(item);
        }
      });
      return tablePush;
    },
    toggleRowSelection(row, blo) {
      console.log(1);
      console.log(row, blo);
      this.$refs.table.toggleRowSelection(row, blo);
    },
    getSummaries(params) {
      this.$nextTick(() => {
        this.$refs.table.doLayout();
      });
      return this.summaryHandler(params);
    },
    doLayout() {
      this.$refs.table.doLayout();
    },
    clearSelection() {
      console.log(2);
      this.$refs.table.clearSelection();
    },
  },
};
</script>

<style scoped>
.table-bottm {
  display: flex;
  justify-content: center;
}

.pagination-container {
  padding: 20px 20px 0 0;
  display: flex;
  justify-content: center;
}

.table-container {
  width: 100%;
  /* background: #fff; */
}

.pagination-container.hidden {
  display: none;
}

/* .table-view {
  overflow-y: auto !important;
  border-left: 1px solid #dfe6ec;
  border-right: 1px solid #dfe6ec;
  border-top: 1px solid #dfe6ec;
} */

::v-deep .el-table__footer-wrapper {
  background: #dfe6ec;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #80a2bf;
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #80a2bf;
  border-color: #80a2bf;
}

.el-checkbox__inner:hover {
  border-color: #80a2bf;
}

::v-deep .el-table .el-table__expand-icon .el-icon-arrow-right:before {
  content: "\e791";
}

::v-deep
  .el-table
  .el-table__expand-icon
  .el-table__expand-icon--expanded
  .el-icon-arrow-right:before {
  content: "\e790";
}
</style>
